<template>
  <div class="search-box">
    <div class="city">西安</div>
    <div class="search-input" @click="goSearch()">
      <img class="logo" src="../assets/logo.png" alt="">
      <span class="shugang">|</span>
      <span class="iconfont icon-fangdajing" ></span>
      <input type="text" placeholder="格力变频空调">
    </div>
    <div class="login">登录</div>
  </div>
</template>

<script>
export default {
  name: "Search",
  methods: {
    goSearch(){
      this.$router.push("/Search");
    }
    }
}
</script>
<style scoped>
  @import url(../assets/iconfonts/iconfont.css);
  .search-box{
    width: 100%;
    height: 3rem;
    display: flex;
    justify-content: space-around;
    background-color: #f66;
    align-items: center;
    color: white;
  }
.search-box div{
  height: 100%;
  line-height: 2.6rem;
  text-align: center;
}
.city,.login{
  width: 3.75rem;
  margin-top: .25rem;
}
.search-input{
  flex: 1;
  position: relative;
}
.logo{
  position: absolute;
  left: .5rem;
  top: 50%;
  transform: translateY(-50%);

}
.shugang{
  position: absolute;
  left: 3.5rem;
  top: 50%;
  color: grey;
  transform: translateY(-53%);

}
.icon-fangdajing{
  position: absolute;
  font-size: 1.25rem;
  left: 4.2rem;
  top: 50%;
  color: black;
  transform: translateY(-50%);
}

.search-input input{
  width: 100%;
  height: 1.875rem;
  border-radius: 1.25rem;
  border: none;
  box-sizing: border-box;
  padding-left: 6rem;
}
</style>

